<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { queryAllPersonAccessRecordsService } from '@/api/record.js'

// 分页条数据模型
const pageNum = ref(1) // 当前页
const total = ref(20) // 总条数
const pageSize = ref(8) // 每页条数

// 当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size
  queryAllPersonAccessRecords()
}

// 当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num
  queryAllPersonAccessRecords()
}

const personAccessRecords = ref([])

const queryAllPersonAccessRecords = async () => {
  let result = await queryAllPersonAccessRecordsService(pageNum.value, pageSize.value)
  if (result.code === 200) {
    personAccessRecords.value = result.data.personAccessRecords.map(record => ({
      ...record,
      role: result.data.role, // 将 role 添加到每个记录中
      accessTime: formatDateTime(record.accessTime)// 在获取数据时直接格式化时间
    }))
    total.value = result.data.total
  } else {
    ElMessage.error('服务异常!')
  }
}

queryAllPersonAccessRecords()

// 辅助函数，用于格式化时间
function formatDateTime(dateString) {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
</script>

<template>
  <el-card style="height: 550px;">
    <el-table :data="personAccessRecords" style="width: 100%;">
      <el-table-column fixed prop="accessTime" label="出入时间" width="200" />
      <!-- <el-table-column fixed prop="accessTime" label="出入时间" width="200">
        <template #default="{ row }">
          {{ formatDateTime(row.accessTime) }}
        </template>
      </el-table-column> -->
      <el-table-column prop="role" label="角色" width="380">
        <!-- <template #default="{ row }">
          {{ row.role }}
        </template> -->
      </el-table-column>
      <el-table-column prop="householderName" label="姓名" width="380" />
      <el-table-column fixed="right" prop="accessType" label="出入状态" min-width="350" />
    </el-table>
    <!-- 统计条数 -->
    <el-col :span="6" class="totalStyle">
      <el-statistic title="Total records" :value="total" />
    </el-col>
    <!-- 分页条 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 8]"
      layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
      @current-change="onCurrentChange" style="margin-top: 2%;justify-content: flex-end" />
  </el-card>
</template>

<style scoped>
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.totalStyle{
  display: flex;
  justify-self: flex-end;
  margin-top: 2.5%;
}
</style>